<template>
  <div>
    <virtual-list
      style="height: 360px; overflow-y: auto;"
      make
      list
      scrollable
      :keeps="keeps"
      :data-key="'id'"
      :data-sources="dataSources"
      :data-component="dataComponent"
      @scroll="scroll"
    />
  </div>
</template>

<script>
import Item from './component/vueItem'
// https://www.jianshu.com/p/622ddf13e707
import VirtualList from 'vue-virtual-scroll-list'
export default {
  name: 'VueVirtualScroll',
  components: { 'virtual-list': VirtualList },
  data() {
    return {
      dataComponent: Item,
      keeps: 10,
      dataLength: 10,
      dataSources: [],
      renderList: []
    }
  },
  created() {
    this.dataSources = this.getDataList(10)
  },
  methods: {
    getDataList(length) {
      const newDataList = [...Array(length || 0).keys()].map((v, i) => ({
        id: i,
        brandId: i + 1,
        name: `第${i + 1}项`,
        height: Math.floor(Math.max(Math.random() * 10, 5)) * 10
      }))
      return newDataList
    },
    scroll(event, range) {
      // console.log(event, range)
      this.dataSources = this.getDataList(20)
      const start = range.start
      const end = range.end
      this.renderList = this.dataSources.slice(start, end)
    }
  }
}
</script>
